*{
    margin: 0;
    padding: 0;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:#c2c2c2;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background:#ff9d4c;
}
.page1{
    width: 100%;
    height: 100%;
}
.page1 .banner{
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: url('../img/banner.png');
}
.content{
    width:610px;
    height:760px;
    overflow: hidden;
    padding: 54px 30px; 
    border-radius:16px;
    margin: 50px auto 0;
    background:#fef9f3;
    box-sizing: border-box;
    box-shadow:0 3px 10px 0 #fa7639;
}
.form-group{
    width:548px;
    height:108px;
    margin-top: 44px;
    border-radius:16px;
    background:#ffffff;
    box-sizing: border-box;
    border:1px solid #ff5500;
    box-shadow:0 6px 6px 0 rgba(250,118,57,0.20);

    font-family:PingFangSC-Regular;
    font-size:30px;
    color:#c2c2c2;
    padding: 0 20px;

}
.phone{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 30px;
    color: #333333;
    line-height: 106px;
    font-family: PingFangSC-Regular;
}
.valiCode{
    float: left;
    height: 100%;
    border: none;
    outline: none;
    font-size: 30px;
    color: #333333;
    margin-right: 20px;
    line-height: 106px;
    width: calc(100% - 200px);
    font-family: PingFangSC-Regular;
}
.get-code{
    float: left;
    background: linear-gradient(49deg, #fea779, #fec58b);
    border-radius:8px;
    width:180px;
    height:56px;
    margin-top: 25px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #ffffff;
    text-align: left;
    line-height: 56px;
    text-align: center;
}
.get-code:active{
    background:linear-gradient(49deg, #ff9124 0%, #ff5500 100%);
}
.get-code.disabled {
    background: #ddd;
}
.btn{
    width:550px;
    height:100px;
    margin: 80px auto;
    border-radius:16px;
    font-family:PingFangSC-Medium;
    font-size:36px;
    color:#ffffff;
    text-align:left;
    line-height: 100px;
    text-align: center;
    background: linear-gradient(49deg, #fea779, #fec58b);
}
.btn:active{
    background:linear-gradient(49deg, #ff9124 0%, #ff5500 100%);
}
.page2{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    background:#ff9d4c;
    transform: translateX(100%);
    transition: all .6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.page2.show{
    transform: translateX(0);
}
.page2 .content{
    background:#fef9f3;
    box-shadow:0 6px 20px 0 #fa7639;
    border-radius:16px;
    width:610px;
    height:1000px;
    padding: 20px;
    box-sizing: border-box;
}
.qrcode-box{
    width: 290px;
    height: 290px;
    overflow: hidden;
    margin: 80px auto 0;
}
.qrcode-img{
    width: 100%;
    height: 100%;
}
.link{
    display: block;
    background:#ff5500;
    border-radius:25px;
    width:224px;
    height:50px;
    margin: 30px auto 0;
    text-decoration: none;
    font-family:PingFangSC-Regular;
    font-size:30px;
    color:#ffffff;
    line-height: 50px;
    text-align:center;

}